<template>
    <div class="scene">
        <!-- 预加载背景图 -->
        <div class="hide-div" style="position: fixed;z-index: -9;">
            <div class="toggle toggle-1"></div>
            <div class="toggle toggle-2"></div>
            <div class="toggle toggle-3"></div>
            <div class="toggle toggle-4"></div>
        </div>
        <div class="toggle" :class="activeToggle.bg">
            <div class="inner w">
                <p class="title-top">{{activeToggle.titleTop}}</p>
                <p class="title-text">{{activeToggle.titleText}}</p>
            </div>
            <div class="scene-nav">
                <ul class="w">
                    <li v-for="item,index in navName" :class="{active:activeName==item}" @click="selected(item,index)">
                        {{item}}
                    </li>
                </ul>
            </div>

        </div>
        <div class="scene-1 w" :class="activeToggle.img">
            <pub-title :text="activeToggle.togTitle"></pub-title>
            <ul class="step">
                <li>
                    <i :class="activeToggle.step1Icon"></i>
                    <p>{{activeToggle.step1Text}}</p>
                </li>
                <li>
                    <i :class="activeToggle.step2Icon"></i>
                    <p>{{activeToggle.step2Text}}</p>
                </li>
                <li>
                    <i :class="activeToggle.step3Icon"></i>
                    <p>{{activeToggle.step3Text}}</p>
                </li>
            </ul>
            <a class="scene-1-btn" href="#" @click="goLogin">立即申请</a>
        </div>
        <div class="scene-2">
            <div class="w inner">
                <pub-title text="剑鱼支持"></pub-title>
                <div class="wrapper">
                    <div class="item">
                        <i class="iconfont icon-guanjianci"></i>
                        <p class="title">按自定义关键词获取招标信息</p>
                        <p class="title-sub">开发者可以通过单个关键词，或多个关键词来设置数据规则，获取招标、中标、拟建等信息。</p>
                    </div>
                    <div class="item">
                        <i class="iconfont icon-qiyeshenfenrz"></i>
                        <p class="title">按细分行业获取招标信息</p>
                        <p class="title-sub">开发者可以根据自身所属行业来设置数据规则，获取招标、中标、拟建等信息。</p>
                    </div>
                    <div class="item">
                        <i class="iconfont icon-qiyebangonglou"></i>
                        <p class="title">按省份、城市获取招标信息</p>
                        <p class="title-sub">开发者可以按照省份，城市来设置数据规则，获取招标、中标、拟建等信息。</p>
                    </div>
                </div>
                <div class="wrapper">
                    <div class="item">
                        <i class="iconfont icon-lingdaitie2"></i>
                        <p class="title">按企业名称获取中标信息</p>
                        <p class="title-sub">开发者可以按照用户的企业名称来设置数据规则，获取该企业的中标信息。</p>
                    </div>
                    <div class="item">
                        <i class="iconfont icon-sousuo"></i>
                        <p class="title">按关键词搜索招标信息</p>
                        <p class="title-sub">用户在开发者的网站上搜索信息时，搜索结果将展示与搜索内容相关的招标、中标、拟建等信息。</p>
                    </div>
                    <div class="item" style="visibility: hidden;"></div>
                </div>
            </div>
        </div>
        <div class="scene-3 w">
            <pub-title text="接入流程"></pub-title>
            <img  style="margin-top: -12px;" src="../assets/scene/liucheng.png"/>
        </div>
    </div>
</template>

<script>
  import pubTitle from '../components/pubTitle.vue'

  export default {
    name: 'scene',
    data: function () {
      return {
        toggle: [{
          titleTop: '应用于-CRM系统',
          titleText: '你可以将客户相关的招标、中标、拟建等信息集成到客户的CRM系统中，实现搜索，订阅招标信息，增加CRM系统在同类产品中的竞争力；',
          bg: 'toggle-1',
          togTitle: '帮助你的客户',
          step1Icon: 'iconfont icon-wodeshangjizhuanhuan',
          step1Text: '精准获得商机',
          step2Icon: 'iconfont icon-xiaoshoubaobiao',
          step2Text: '管理销售线索',
          step3Icon: 'iconfont icon-jingzhengqingbao',
          step3Text: '及时获取竞争对手中标情况',
          img: 'scene-01'
        },
          {
            titleTop: '应用于-企业信息查询',
            titleText: '你可以将企业相关的中标，招标信息集成到企业信息中，用于企业征信，企业信息查询，招标信息订阅等产品形态，为用户提供更多增值服务。',
            bg: 'toggle-2',
            togTitle: '帮助你',
            step1Icon: 'iconfont icon-qiyexinxi',
            step1Text: '丰富企业信息',
            step2Icon: 'iconfont icon-xuanzehuaxiang',
            step2Text: '完善企业画像',
            step3Icon: 'iconfont icon-linedesign-16',
            step3Text: '提高用户使用粘性',
            img: 'scene-02'
          },
          {
            titleTop: '应用于-垂直行业门户',
            titleText: '你可以将单个行业，或者多个细分行业的招标、中标、拟建等招标信息集成到门户网站内容中，向用户提供招标信息的浏览，搜索，订阅等更多内容服务。',
            bg: 'toggle-3',
            togTitle: '帮助你',
            step1Icon: 'iconfont icon-62',
            step1Text: '丰富网站内容',
            step2Icon: 'iconfont icon-gongneng',
            step2Text: '增强网站功能',
            step3Icon: 'iconfont icon-erji-zengzhifuwu',
            step3Text: '增加用户的增值服务项目',
            img: 'scene-03'
          },
          {
            titleTop: '应用于-区域门户',
            titleText: '你可以按省份或者城市，将招标、中标、拟建等招标信息集成到门户网站中，向用户提供招标信息的浏览，搜索，订阅等更多内容服务。',
            bg: 'toggle-4',
            togTitle: '帮助你',
            step1Icon: 'iconfont icon-62',
            step1Text: '丰富网站内容',
            step2Icon: 'iconfont icon-gongneng',
            step2Text: '增强网站功能',
            step3Icon: 'iconfont icon-erji-zengzhifuwu',
            step3Text: '增加用户的增值服务项目',
            img: 'scene-03'
          }
        ],
        activeToggle: {
          titleTop: '应用于-CRM系统',
          titleText: '你可以将客户相关的招标、中标、拟建等信息集成到客户的CRM系统中，实现搜索，订阅招标信息，增加CRM系统在同类产品中的竞争力；',
          bg: require('../assets/scene/banner-1.png'),
          togTitle: '帮助你的客户',
          step1Icon: 'iconfont icon-wodeshangjizhuanhuan',
          step1Text: '精准获得商机',
          step2Icon: 'iconfont icon-xiaoshoubaobiao',
          step2Text: '管理销售线索',
          step3Icon: 'iconfont icon-jingzhengqingbao',
          step3Text: '及时获取竞争对手中标情况',
          img: require('../assets/scene/pub-title-bg-1.png')
        },
        navName: ['CRM-系统', '企业信息查询', '垂直行业门户', '区域门户'],
        activeName: 'CRM-系统'
      }
    },
    components: {
      pubTitle
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {
      let i = this.$route.params.i || 0
      this.selected('', i)

    }, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      goLogin () {
        this.$bus.$emit('userLogin', true)
      },
      /*切换导航*/
      selected (item, index) {
        this.activeName = this.navName[index]
        this.activeToggle = {}
        this.activeToggle = this.toggle[index]
      }
    } // 函数

  }
</script>

<style lang="scss">
    .scene {
        .toggle {
            height: 314px;
            padding-top: 64px;
            box-sizing: border-box;
            position: relative;
            background: url(../assets/scene/banner-1.png) 0 0 no-repeat;
            background-size: cover;
            &.toggle-1 {
                background: url(../assets/scene/banner-1.png) 0 0 no-repeat;
                background-size: cover;
            }
            &.toggle-2 {
                background: url(../assets/scene/banner-2.png) 0 0 no-repeat;
                background-size: cover;
            }
            &.toggle-3 {
                background: url(../assets/scene/banner-3.png) 0 0 no-repeat;
                background-size: cover;
            }
            &.toggle-4 {
                background: url(../assets/scene/banner-4.png) 0 0 no-repeat;
                background-size: cover;
            }
            .title-top {
                width: 230px;
                font-size: 22px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                color: rgba(255, 255, 255, .8);
                border: 1px solid rgba(255, 255, 255, .8);
            }
            .title-text {
                width: 760px;
                line-height: 33px;
                font-size: 17px;
                color: rgba(255, 255, 255, .8);
                margin-top: 27px;
            }
            .scene-nav {
                width: 100%;
                height: 54px;
                position: absolute;
                left: 0;
                bottom: 0;
                background-color: rgba(255, 255, 255, .1);
                ul {
                    display: flex;
                    li {
                        flex: 1;
                        line-height: 54px;
                        text-align: center;
                        color: #fff;
                        cursor: pointer;
                        &.active {
                            background-color: rgba(255, 255, 255, .16);
                        }
                        &:hover {
                            background-color: rgba(255, 255, 255, .16);
                        }
                    }
                }
            }
        }
        .scene-1 {
            height: 633px;
            position: relative;
            background: #fff url(../assets/scene/pub-title-bg-1.png) 40px 260px no-repeat;
            &.scene-01 {
                background: #fff url(../assets/scene/pub-title-bg-1.png) 40px 260px no-repeat;
            }
            &.scene-02 {
                background: #fff url(../assets/scene/pub-title-bg-2.png) 160px 260px no-repeat;
            }
            &.scene-03 {
                background: #fff url(../assets/scene/pub-title-bg-3.png) 180px 300px no-repeat;
            }
            &.scene-04 {
                background: #fff url(../assets/scene/pub-title-bg-3.png) 180px 300px no-repeat;
            }
            .step {
                display: flex;
                li {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    transition: all 0.5s;
                    height: 66px;
                    &:hover {
                        color: #2cb7ca;
                    }
                    &:hover i {
                        color: #2cb7ca;
                    }
                    & + li {
                        border-left: 1px solid #cacaca;
                    }
                    i {
                        display: inline-block;
                        font-size: 36px;
                        color: #000;
                    }
                }
            }
            .scene-1-btn {
                position: absolute;
                right: 153px;
                bottom: 148px;
                width: 230px;
                height: 66px;
                box-sizing: border-box;
                line-height: 66px;
                text-align: center;
                background: #2CB7CA url(../assets/scene/sanjiao.png) 187px center no-repeat;
                color: #fff;
                border-radius: 5px;
                font-size: 24px;
                transition: all 0.5s;
                &:hover {
                    transform: translateX(20px);
                }
            }
        }
        .scene-2 {
            height: 600px;
            background-color: #f3f3f3;
            .inner {
                .wrapper {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 17px;
                    .item {
                        box-sizing: border-box;
                        padding: 24px 30px;
                        cursor: pointer;
                        width: 390px;
                        height: 190px;
                        background-color: #fff;
                        &:hover {
                            color: #2CB7CA;
                            border: 1px solid #2CB7CA;
                        }
                        &:hover .title {
                            color: #2CB7CA;
                        }
                        &:hover .title-sub {
                            color: #2CB7CA;
                        }
                        i {
                            display: block;
                            font-size: 40px;
                        }
                        .title {
                            font-size: 20px;
                            color: #000;
                            margin-top: 22px;
                            margin-bottom: 12px;
                        }
                        .title-sub {
                            line-height: 26px;
                            color: #999;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
        .scene-3 {
            height: 264px;
            text-align: center;
        }
    }
</style>